<template>
    <div class="box1" @scroll="scrollFun">
        <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="($router.push('/home/cla'))" />
        <van-search v-model="value" placeholder="请输入搜索关键词" @click="search" />
        <div v-for="item in search" v-if="search.length > 0">
            <router-link :to="{ name: 'detail', params: { goods_id: item.goods_id } }">
                <van-card :price="item.goods_price" :title="item.goods_name">
                    <template #thumb>
                        <lazy-component>
                            <img :src="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                alt=""
                                v-lazy="item.goods_small_logo ? item.goods_small_logo : 'https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg'"
                                style="width: 6rem;height: 6rem;" />
                        </lazy-component>

                    </template>

                </van-card>

            </router-link>
        </div>
        <div v-else>
            <van-empty image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                description="描述文字" />

        </div>





    </div>



</template>

<script setup>
import { ref } from 'vue';
import { searchApi } from '@/api/api';
import router from '@/router';
import { List } from 'vant';
let search = ref([])
searchApi().then(res => {
    console.log('列表', res)
    search.value = res.data.message.goods
    setTimeout(() => {
        document.querySelector('.box1').scrollTop =
            localStorage.getItem('orderScroll')
    }, 100)
})
const scrollFun = (e) => {
    console.log(e.target.scrollTop)
    localStorage.setItem('orderScroll', e.target.scrollTop)
}

</script>

<style lang="scss" scoped>
.box1 {
    width: 100%;
    height: 100%;
    overflow: auto;
}
</style>